<template>
    <view class="zh-period-picker">
        <view class="display-flex justify-center align-center zh-period-picker-select">
            <view class="date start-date font-666666" @click="selectStartDate">
                <text v-if="props.date1">{{ props.date1 }}</text>
                <text v-else>开始日期</text>
            </view>
            <text class="font-666666">至</text>
            <view class="date end-date font-666666" @click="selectEndDate">
                <text v-if="props.date2">{{ props.date2}}</text>
                <text v-else>截止日期</text>
            </view>
        </view>
        <u-date-picker :date="currentDate" title="选择开始日期" :show="date1Show" @change="startDateConfirm" @close="changeStartDateShow"></u-date-picker>
		<u-date-picker :date="currentDate" title="选择截止日期" :show="date2Show" @change="endDateConfirm" @close="changeEndDateShow"></u-date-picker>
    </view>
</template>
<script setup lang="ts">
    import { ref } from 'vue'
    import { util, tip } from '@/utils'

    const props = defineProps<{
        date1?: string
        date2?: string
    }>()
    const date1Show:any = ref(false)
    const date2Show:any = ref(false)
    const currentDate:any = util.formatDate(new Date())
    const emit = defineEmits(['selectDate1','selectDate2'])
   
    const selectStartDate = () => {
        changeStartDateShow()
    }

    const selectEndDate = () => {
        changeEndDateShow()
    }

    const startDateConfirm = (data: string) => {

        const startDate:string = data
        const endDate:any = props.date2
        changeStartDateShow()
        if(props.date2 && util.getDaysBetween(startDate, endDate) === -1)  return tip.showToast('开始日期必须不小于截止日期')
        emit('selectDate1', startDate)
    }

    const endDateConfirm = (data: string) => {
        const endDate: string = data
        const startDate: any = props.date1
        changeEndDateShow()
        if(props.date1 && util.getDaysBetween(startDate, endDate) === -1) return tip.showToast('截止日期必须不小于开始日期')
        emit('selectDate2', endDate)
    }

    const changeStartDateShow = () => {
        date1Show.value = !date1Show.value
    }

    const changeEndDateShow = () => {
        date2Show.value = !date2Show.value
    }

</script>
<style lang="scss" scoped>
    .zh-period-picker {
        width:100%;
        &-select {
            margin-top: 20rpx;
            .date {
                text-align:center;
                width:194rpx;
                height:60rpx;
                line-height: 60rpx;
                background: #F3F4F7;
                border-radius: 30rpx;
            }
            .start-date {
                margin-right: 20rpx;
            } 
            .end-date {
                margin-left: 20rpx;
            }
        } 
    }
</style>